import React from "react";
import { Input, Checkbox ,Button} from 'antd';
import './NotificationSetting.css'
const CheckboxGroup = Checkbox.Group;
const plainOptions = ['提交订单', '订单审核', '财务审核'];
const defaultCheckedList = ['提交订单', '订单审核', '财务审核'];
const plainOptions1 = ['代下订单', '订单审核', '收货确认'];
const defaultCheckedList1 = ['代下订单', '订单审核', '收货确认'];
const plainOptions2 = ['客户付款', '客户资金充值'];
const defaultCheckedList2 = ['客户付款', '客户资金充值'];
export default class NotificationSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedList: defaultCheckedList,
      indeterminate: true,
      checkAll: false,
      checkedList1: defaultCheckedList1,
      indeterminate1: true,
      checkAll1: false,
      checkedList2: defaultCheckedList2,
      indeterminate2: true,
      checkAll2: false,
    };
  }
  onChange = checkedList => {
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll: checkedList.length === plainOptions.length,
    });
  };
  onChange1 = checkedList1 => {
    this.setState({
      checkedList1,
      indeterminate1: !!checkedList1.length && checkedList1.length < plainOptions1.length,
      checkAll1: checkedList1.length === plainOptions1.length,
    });
  };
  onChange2 = checkedList2 => {
    this.setState({
      checkedList2,
      indeterminate2: !!checkedList2.length && checkedList2.length < plainOptions2.length,
      checkAll2: checkedList2.length === plainOptions2.length,
    });
  };
  onCheckAllChange = e => {
    this.setState({
      checkedList: e.target.checked ? plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };
  onCheckAllChange1 = e => {
    this.setState({
      checkedList1: e.target.checked ? plainOptions1 : [],
      indeterminate1: false,
      checkAll1: e.target.checked,
    });
  };
  onCheckAllChange2 = e => {
    this.setState({
      checkedList2: e.target.checked ? plainOptions2 : [],
      indeterminate2: false,
      checkAll2: e.target.checked,
    });
  };
  render() {
    return (
      <div>
        <h2>短信通知</h2>
        <div className={'duantongHead'}>
          <h3>短信签名设置</h3>
          <span>
            温馨提示：【找回密码】及【快速注册】的短信审核严格，带标点符号/特殊符号的短信签名难生效。建议您的短信签名仅使用中文、英文和数字。
          </span>
          <span>
            短信签名设置后，显示在发送出去的每一条短信开头，将会占用短信的字数，请根据您的公司名称设置。
          </span>
          <Input />
        </div>
        <div className={'duantongMid'}>
          <h3>开通账号短信设置</h3>
          <div>
            <span>公司地址</span>
            <Input />
          </div>
          <div>
            <span>登录地址</span>
            <Input />
          </div>
          <div>
            <span>联系人</span>
            <Input />
          </div>
          <div>
            <span>联系电话</span>
            <Input />
          </div>
          <div>
            <span>短信实例</span>
            <div>
              <span>易订货为您开通了移动订货电商平台账号（登录地址：https://sso.dinghuo123.com）,用户名[customer1]，初始密码[123456]。如需帮助请致电：陈先生,13760336952</span>
            </div>
          </div>
        </div>
        <div className={'duantongDown'}>
          <h3>当管理端触发以下操作时，发送短信给订货客户</h3>
            <div>
              <div className="site-checkbox-all-wrapper">
                <Checkbox
                  indeterminate={this.state.indeterminate}
                  onChange={this.onCheckAllChange}
                  checked={this.state.checkAll}
                >
                  订单
                </Checkbox>
              </div>
              <div>
                <CheckboxGroup
                options={plainOptions}
                value={this.state.checkedList}
                onChange={this.onChange}
              />
              </div>
            </div>
            <div>
              <div className="site-checkbox-all-wrapper">
                <Checkbox
                  indeterminate={this.state.indeterminate1}
                  onChange={this.onCheckAllChange1}
                  checked={this.state.checkAll1}
                >
                  退单
                </Checkbox>
              </div>
              <div>
                <CheckboxGroup
                options={plainOptions1}
                value={this.state.checkedList1}
                onChange={this.onChange1}
              />
              </div>
            </div>
            <div>
              <div className="site-checkbox-all-wrapper">
                <Checkbox
                  indeterminate={this.state.indeterminate2}
                  onChange={this.onCheckAllChange2}
                  checked={this.state.checkAll2}
                >
                  资金
                </Checkbox>
              </div>
              <div>
                <CheckboxGroup
                options={plainOptions2}
                value={this.state.checkedList2}
                onChange={this.onChange2}
              />
              </div>
            </div>
        </div>
        <div className={'save'}>
        <Button className={'button'} style={{ backgroundColor: '#4BD0B6', border: '#4BD0B6' }} type="primary">保存</Button>
        </div>
      </div>
    );
  }
}
